import React, { Component } from 'react';
//引入路由
import {BrowserRouter as  Router,Route,Switch } from 'react-router-dom'
//引入内容组件 //imp快捷键
import Navbar from './components/layout/Navbar'
import Footer from './components/layout/Footer'
import Landing from './components/layout/Landing'
import Login from './components/auth/Login'
import Register from './components/auth/Register'
import './App.css';
import store from './store'
//让他包裹的组件和其的子组件的state  可以被 拿到
import { Provider }  from   'react-redux'
import setAuthToken from './utils/setAuthToken'
import  jwt_decode from 'jwt-decode'
// import  {GET_ERRORS} from '../src/actions/types'
import { setCurrentUser,logoutUser} from './actions/authActions';
// 刷新页面 不会重新发送action   保存以前数据
import Dashboard from '../src/components/dashboard/dashboard'
import EditProfile from '../src/components/edit-profile/EditProfile'
import PrivateRoute from './common/PrivateRoute'
import CreateProfile from '../src/components/create-profile/create-profile'
import AddExperience from './components/add-credentials/AddExperience';
import AddEducation from './components/add-credentials/AddEducation';
import Profiles from './components/profiles/Profiles'
import Profile from './components/profile/Profile';
import Posts from './components/posts/Posts'
import Post from './components/post/Post'
if(localStorage.jwtToken)  {
   //设置axios  的header
   setAuthToken(localStorage.jwtToken);
   // 解析token
   const decoded = jwt_decode(localStorage.jwtToken);
   store.dispatch(setCurrentUser(decoded));
     // 检测token是否过期
            // 获取当前时间
            const currentTime = Date.now() / 1000;
            // 判断当前是否大于token过期时间
            console.log(decoded)
            if (decoded.exp< currentTime) {
              // 过期
              store.dispatch(logoutUser());
              // TODO: 清楚用户信息
              // 页面跳转
              window.location.href = "/login";
             }
}

class App extends Component {
  render() {
    return (
      //Provider在根组件包裹了一层，让他包裹的组件和其的子组件的state可以被拿到
      <Provider store={store}>
              <Router>
              <div className="App">
              {/* 显示的组件 */}
                  <Navbar/>  
                    <Route exact path="/"  component={Landing}/>
                    <div className="container">
                        <Route exact path="/register" component={Register} />
                        <Route exact path="/login" component={Login} />
                        <Route exact path="/profiles" component={Profiles} />
                        <Route exact path="/profile/:handle" component={Profile} />
                        <Switch>
                           <PrivateRoute exact path="/dashboard" component={Dashboard} />
                        </Switch>
                        <Switch>
                           <PrivateRoute exact path="/create-profile" component={CreateProfile} />
                        </Switch>
                        <Switch>
                           <PrivateRoute exact path="/edit-profile" component={EditProfile} />
                        </Switch>
                        <Switch>
                           <PrivateRoute exact path="/add-experience" component={AddExperience} />
                        </Switch>
                        <Switch>
                         <PrivateRoute exact path="/add-education" component={AddEducation} />
                        </Switch>
                        <Switch>
                         <PrivateRoute exact path="/feed" component={Posts} />
                        </Switch>
                        <Switch>
                           <PrivateRoute exact path="/post/:id" component={Post} />
                      </Switch>
                    </div>
                  <Footer/>  
              </div>
              </Router>
      </Provider>
    );
  }
}

export default App;
